<template>
  <div class="personalTabbar bgImg">
    <div class="body">
      <div class="wenzi">
        <h1>个人中心</h1>
        <i class="iconfont icon-xian-xuxian"></i>
        <span>personal</span>
      </div>
      <div class="body-personal">
        <div class="navigation">
          <el-row class="tac">
            <el-col :span="30">
              <el-menu
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose">
                <el-menu-item v-for="(naItem,naIndex) in navigation" :key="naIndex"  @click="go(naItem,naIndex)" :class="active==naIndex?'active':''">
                  <i class="iconfont" :class="naItem.icon"></i>
                  <span slot="title">{{naItem.name}}</span>
                </el-menu-item>
                <el-menu-item  @click="to('/personalTabbar/aboutMe',9)" :class="active==9?'active':''">
                  <el-badge :value="newPraise==0?'':newPraise" class="item">
                    <span>
                      <i class="iconfont icon-guanyu"></i>
                      <span slot="title">与我有关</span>
                    </span>
                    <!-- <el-button size="small">评论</el-button> -->
                  </el-badge>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </div>
        <!-- 密保问题 -->
        <el-dialog title="请输入密保问题，用来验证本人找回密码的哦" style="width:400px;" :visible="true" v-if="Visible">
          <el-form :model="form" :rules="rules">
            <el-form-item label="问题" :label-width="formLabelWidth" prop="question">
              <el-input v-model="form.question" autocomplete="off" placeholder="请先设置问题哦"></el-input>
            </el-form-item>
            <el-form-item label="答案" :label-width="formLabelWidth" prop="answer">
            <el-input v-model="form.answer" autocomplete="off" placeholder="也要填相应的答案哟"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="Visible = false">取 消</el-button>
            <el-button type="primary" @click="submitForm(form)">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 组件 -->
        <router-view></router-view>
      </div>
    </div>

  </div>
</template>
<script>
export default {
  inject:['reload'],//注入App里的reload方法
  data(){
    return {
      navigation:[
        {
          "id":1,
          "name":"个人资料",
          "icon":"icon-gerenxinxi",
          "route":"/personalTabbar/personal"
        },
        {
          "id":2,
          "name":"修改密码",
          "icon":"icon-zhanghao",
          "route":"/personalTabbar/account"
        },
        {
          "id":2,
          "name":"注销账号",
          "icon":"icon-zhanghaozhuxiao",
          "route":"/personalTabbar/logout"
        },
        {
          "id":3,
          "name":"点赞",
          "icon":"icon-dianzan",
          "route":"/personalTabbar/praise"
        },
        {
          "id":4,
          "name":"收藏",
          "icon":"icon-shoucang3",
          "route":"/personalTabbar/collect"
        },
      ],
      active:0,
      Visible: "",
      form: {
        question: '',
        answer: '',
      },
      formLabelWidth: '60px',
      rules:{
        question:[
          { required: true, message: '问题不能为空哦', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符，不要太长哦', trigger: 'blur' }
        ],
        answer:[
          { required: true, message: '答案不能为空哦', trigger: 'blur' },
          { min: 1, max: 20, message: '长度在 1 到 20 个字符，太长记不住哦', trigger: 'blur' }
        ],

      },
      isLogin:"",
      user_id:"",
      showRed:"",
      newPraise:0
    }
  },
  mounted(){
    this.getSecret();
    // this.getPraiseMes();
    this.isLogin = this.$store.getters.getShow;
    if(this.isLogin){
        this.user_id = this.$store.getters.getUser.user_id;
    }
    this.getNewMes(this.user_id,"selNewPraiseMes");
    this.getNewMes(this.user_id,"selNewReplyMes");
    // console.log(this.$store.getters.getShowRed);
    //console.log(this.$store.state.showRed);
  },
  methods: {
    // 密保问题
    async getSecret(){
      let variate = this.$store.getters.getUser.user_id;
       const {data:selRes} = await this.$http.post("selSecret",{variate});
       //console.log(selRes);
       if(selRes.status != 200){
         this.$message.error('查询失败');
       }else{
         let arr = selRes.message
         if(arr.length>0){
          // this.$message('已经添加过密保问题了');
          this.Visible = false;
        }else{
          this.Visible = true;
        }
       }
       //console.log(this.Visible);
    },
    // 打开
    handleOpen(key, keyPath) {
      //console.log(key, keyPath);
    },
    // 关闭
    handleClose(key, keyPath) {
      //console.log(key, keyPath);
    },
    // 跳转
    go(item,index){
      // console.log(item);
      let id = this.$route.query.id;
      this.active = index;
      this.$router.push({path:item.route,query:{id}})
      if(item.name == "修改密码"){
        this.$store.commit("updateVerify",true);
        // location.reload();
        this.reload();
      }
    },
    // 跳转
    to(path,index){
       let id = this.$route.query.id;
      this.active = index;
      this.$router.push({path:path,query:{id}})
    },
    // 确认按钮
    async submitForm(item){
      item.id = this.$store.getters.getUser.user_id;
      //console.log(item);
        const {data:res} = await this.$http.post("insertSecret",{item});
      if(res.status != 200){
        this.$message.error('抱歉，添加失败哦');
      }else{
        this.$message({
          message: '添加成功啦',
          type: 'success'
        });
        this.Visible = false;
      }
    },
    // 查询当前登录的用户，登入 登出的时间
    async getNewMes(user_id,path){
      let variate = user_id;
      const {data:res} = await this.$http.post(path,{variate});
      console.log(res);
      if(res.status != 200){
        this.$message.error('查询失败');
      }else{
        let arr = res.message;
        if(arr.length>0){
          this.$store.commit("updateShowRed",true);
          this.newPraise += arr.length;
        }else{
          this.$store.commit("updateShowRed",false);
          console.log("没有最新的信息");
        }
      }
    },
  }
}
</script>
<style scoped>
@import url('./css/person.css');
</style>
